@use './variables' as *;
@use './resets' as *;
@use './focus' as *;

* {
  box-sizing: border-box;
}

.picker {
  contain: content;
  display: flex;
  flex-direction: column;
  background: var(--background);
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--border-radius);
  width: 100%;
  height: 100%;
  overflow: hidden;

  // private variables
  --total-emoji-size: calc(var(--emoji-size) + (2 * var(--emoji-padding)));
  --total-category-emoji-size: calc(var(--category-emoji-size) + (2 * var(--category-emoji-padding)));
}

// via https://stackoverflow.com/a/19758620
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.hidden {
  opacity: 0;
  pointer-events: none;
}

.abs-pos {
  position: absolute;
  left: 0;
  top: 0;
}

.gone {
  display: none !important;
}
